import React, { Suspense } from 'react'
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
import routes from './router/index'

function App() {
  // 递归函数
  const renderRouter = (routes) => {
    let arr = routes && routes.map((item, index) => {
      return (
        <Route
          key={index}
          path={item.path}
          element={item.element ? <item.element /> : <Navigate to={item.to} />}
        >
          {/* 递归渲染二级路由 */}
          {item.children && renderRouter(item.children)}
        </Route>
      )
    })
    return arr
  }

  return (
    // 路由白屏优化
    <Suspense fallback={<div>路由加载中...</div>}>
      <BrowserRouter>
        <Routes>
          {
            renderRouter(routes)
          }
        </Routes>
      </BrowserRouter>
    </Suspense>
  )
}

export default App
